<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
      <div class="logo">
        <img src="@/assets/img/main/logo.png" alt="logo" />
      </div>
      <a-menu theme="dark" mode="inline" :selected-keys="[selectedKey]" @click="handleMenuClick">
        <a-menu-item key="vehicle-allocation">
          <a-icon type="car" />
          <span>车辆使用情况</span>
        </a-menu-item>
        <a-menu-item key="driver-allocation">
          <a-icon type="idcard" />
          <span>驾驶员出车情况</span>
        </a-menu-item>
        <a-menu-item key="vehicle-application">
          <a-icon type="audit" />
          <span>用车申请列表</span>
        </a-menu-item>
        <a-menu-item key="add-vehicle-application" v-if="isDepart || isAdmin">
          <a-icon type="select" />
          <span>申请用车</span>
        </a-menu-item>
        <a-menu-item key="daily-record" v-if="isDriver || isAdmin">
          <a-icon type="solution" />
          <span>日常记录</span>
        </a-menu-item>
        <a-menu-item key="vehicle-statistics" v-if="isAdmin">
          <a-icon type="line-chart" />
          <span>出车数据统计</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <div class="header-right">
          <a-dropdown>
            <a class="ant-dropdown-link" @click.prevent>
              <a-icon type="user" /> {{ userInfo.person_name || '未登录' }}
              <a-icon type="down" />
            </a>
          </a-dropdown>
        </div>
        <a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="() => (collapsed = !collapsed)" />
      </a-layout-header>
      <a-layout-content
        :style="{ margin: '24px 16px', padding: '16px', background: '#fff', minHeight: 'calc(100vh - 64px - 48px)',overflowY: 'auto'}">
        <router-view />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
  import {
    apiVehicleApplicationAvailableDrivers
  } from '@/api/featch'
  export default {
    name: 'ov-main',
    data() {
      return {
        collapsed: false,
        selectedKey: '',
        userInfo: {},
        // 驾驶员
        drivers: []
      }
    },
    computed: {
      isAdmin() {
        return this.userInfo.role_ov === '系统管理员'
      },
      isDepart() {
        return this.userInfo.role_ov === '部门负责人'
      },
      isDriver() {
        let flag = false
        this.drivers.map(item => {
          if (item.person_id === this.userInfo.person_id) {
            flag = true
          }
        })
        return flag
      }
    },
    watch: {
      $route: {
        immediate: true,
        handler(route) {
          const menuKeyMap = {
            '/ov-main/vehicle-allocation': 'vehicle-allocation',
            '/ov-main/driver-allocation': 'driver-allocation',
            '/ov-main/vehicle-application': 'vehicle-application',
            '/ov-main/add-vehicle-application': 'add-vehicle-application',
            '/ov-main/daily-record': 'daily-record',
            '/ov-main/vehicle-statistics': 'vehicle-statistics',
          }
          this.selectedKey = menuKeyMap[route.path] || ''
        }
      }
    },
    mounted() {
      // 获取用户信息
      const personInfo = window.sessionStorage.getItem('person_info')
      if (personInfo) {
        this.userInfo = JSON.parse(personInfo)
      }

      this.handleGetDriver()
    },
    methods: {
      handleMenuClick({
        key
      }) {
        const path = {
          'vehicle-allocation': '/ov-main/vehicle-allocation',
          'driver-allocation': '/ov-main/driver-allocation',
          'vehicle-application': '/ov-main/vehicle-application',
          'add-vehicle-application': '/ov-main/add-vehicle-application',
          'daily-record': '/ov-main/daily-record',
          'vehicle-statistics': '/ov-main/vehicle-statistics',
        } [key]

        if (path && path !== this.$route.path) {
          this.$router.push(path).catch(err => {
            if (err.name !== 'NavigationDuplicated') {
              console.error('导航错误:', err)
            }
          })
        }
      },
      handleGetDriver() {
        apiVehicleApplicationAvailableDrivers()
          .then(res => {
            if (res.code === 200) {
              this.drivers = res.data
            }
          })
      }
    }
  }
</script>

<style scoped>
  #components-layout-demo-custom-trigger {
    height: 100vh;
  }

  #components-layout-demo-custom-trigger .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
  }

  #components-layout-demo-custom-trigger .trigger:hover {
    color: #1890ff;
  }

  .logo {
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #001529;
  }

  .logo img {
    height: 32px;
  }

  .header-right {
    float: right;
    margin-right: 24px;
  }

  .ant-dropdown-link {
    color: rgba(0, 0, 0, 0.65);
  }

  .ant-dropdown-link:hover {
    color: #1890ff;
  }
</style>